import { useContext } from "react"
import { Global } from "../main"
import { App, Button, Card, Flex, Form, Input, Layout } from 'antd';
import { LockOutlined, UserOutlined } from '@ant-design/icons'
import { useNavigate } from "react-router-dom";
import { Content } from "antd/es/layout/layout";
import { useForm } from "antd/es/form/Form";
import user_api, { USER_ROLE } from "../api/users";
import storage from "../storage";
export function Login() {
    const { logined, setLogined } = useContext(Global)
    const navigate = useNavigate()
    const [userForm] = useForm()
    const { message, modal, notification } = App.useApp();

    const loginConfirm = (data) => {
        user_api.login(data).then((result) => {
            storage.saveUser({ ...result, logined: true })
            setLogined(true)
            navigate('/')
        }).catch(e => { message.error(e.response.data) })
    }
    return <>
        <Layout>
            <Content>
                <Flex justify="center" align="center" style={{ height: '100vh', flexDirection: 'column' }}>
                    <Flex justify="center" align="center" style={{ minHeight: '20vh' }}>
                        <h1>供应商及材料管理系统</h1>
                    </Flex>
                    <Flex justify="center">
                        <Card>
                            <div>
                                <Form
                                    style={{
                                        minWidth: 400,
                                    }}
                                    size="large"
                                    form={userForm}
                                    onFinish={loginConfirm}
                                    initialValues={{
                                        username: '',
                                        password: ''
                                    }}>
                                    <Form.Item name={"username"} rules={[{
                                        required: true,
                                        message: "请输入用户名"
                                    }]}>
                                        <Input prefix={<UserOutlined className="site-form-item-icon" />}></Input>
                                    </Form.Item>
                                    <Form.Item name={"password"} rules={[{
                                        required: true,
                                        message: "请输入密码"
                                    }]}>
                                        <Input.Password prefix={<LockOutlined></LockOutlined>}></Input.Password>
                                    </Form.Item>
                                    <Form.Item>
                                        <Button style={{ width: "100%" }} type="primary" htmlType="submit">登录</Button>
                                    </Form.Item>
                                </Form>
                            </div>
                        </Card>
                    </Flex>
                </Flex>


            </Content>
        </Layout>
    </>
}